<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>木门播放器</title>
<meta name="Author" CONTENT="ZETD">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

<link rel="stylesheet" href="images/common.css">
<script src="images/jquery-2.0.0.min.js"></script>
<script src="images/move.min.js"></script>
<script src="images/common.js"></script>
</head>

<body>
	<div class="cover_bg">
		<div class="cover_pic" id="cover_pic">
			<a href="javascript:void(0)" id="heartbtn" class="heartbtn"></a>
			<a href="javascript:void(0)" id="fmlist" class="homebtn"></a>
			<div class="playbg">
				<div class="songtitle" id="songtitle"></div>
				<div class="auther" id="auther"></div>
				<div class="progdiv">
					<div class="pgbg">
						<div id="pgbuf" class="pgbuf" style="width: 0%;"></div>
						<div id="pgtime" class="pgtime" style="width: 0%;"></div>
					</div>
				</div>
				<div class="playbtns">
					<a href="javascript:void(0)" id="prevbtn" class="prevbtn"></a>
					<a href="javascript:void(0)" id="playbtn" class="playbtn"></a>
					<a href="javascript:void(0)" id="nextbtn" class="nextbtn"></a>
				</div>
			</div>
		</div>
	</div>
	<div class="songintro" id="songintro"></div>
    <audio id="song_player" src="" preload="auto" autoplay="autoplay"></audio>
	<div class="copyright">木门音乐盒子</div>
    <div id="fmlistbox" class="fmlistbox">
    	<div class="header">
            <header>
                <a href="javascript:void(0)" id="all_list" class="list_style">全部歌曲</a>
                <a href="javascript:void(0)" id="like_list" class="list_style no_select">我喜欢的</a>
                <a href="javascript:void(0)" id="fmlista" class="fmlista"></a>
            </header>
        </div>
        <div id="fmlistdiv" class="fmlistdiv">
			<dl>
				<a href="javascript:void(0)">
				<dt><img src="images/cover.jpg" width=50></dt>
				<dd><h3></h3></dd>
				<dd></dd>
				<dd><span></span></dd>
				</a>
			</dl>
        </div>
        <nav class="s_page" id="s_page">
			<div class="s_page_div" id="s_page_div">
			<a href="javascript:void(0)" class="first_pg">首页</a>
			<a href="javascript:void(0)" class="prev_pg">上一页</a>
			<a href="javascript:void(0)" class="next_pg">下一页</a>
			<a href="javascript:void(0)" class="end_pg">尾页</a>
			</div>
        </nav>
    </div>


<script>
    //新建一个播放器类，页面宽度高度；
var player = new Player(), dwidth, dheight;
    //定义前后歌曲ID，当前歌曲ID，微信用户ID
var next_id=0,prev_id=0,current_id=0,open_id="";
$(function() {
    //初始化页面
	initsite();
    //绑定列表页打开事件
	$('#fmlist').click(function(){
		move('#fmlistbox').set('left', 0).end();
		return false;
	});
    //绑定列表页关闭事件
	$('#fmlista').click(function(){
		move('#fmlistbox').sub('left', dwidth).end();
		return false;
	});
    //绑定点击喜欢事件
	$('#heartbtn').click(function(){
		like();
		return false;
	});
    //绑定播放上一首事件
	$('#prevbtn').click(function(){
		prev_song();
		return false;
	});
    //绑定播放下一首事件
	$('#nextbtn').click(function(){
		next_song();
		return false;
	});
    //显示全部歌曲列表
	$('#all_list').click(function(){
        $("#all_list").removeClass("no_select");
        $("#like_list").addClass("no_select");
		get_list(1,0);
		return false;
	});
    //显示喜欢歌曲列表
	$('#like_list').click(function(){
        $("#all_list").addClass("no_select");
        $("#like_list").removeClass("no_select");
		get_list(1,1);
		return false;
	});
    //播放器绑定音乐组件
	player.init('#song_player');
    //获取url传递的值
   	var queryString = location.search;
	var request_string = parseQuery(queryString);
    //分割获取的值
  	request_string=request_string.split('&&');
    //当前默认歌曲ID
    current_id=request_string[0];
    //微信用户ID
    open_id=request_string[1];
    //从服务器上获取歌曲详细资料
	get_song(current_id,open_id);
    //默认获取全部歌曲列表的第一页
    get_list(1,0);
});
    
    //获取url传递的参数   
function parseQuery ( query ) {
   var Params = "0&&";
   if (!query ) return Params; // return empty object
   var query = query.substr(1);
   return query;
}
    //获取歌曲详细
function get_song(song_id,open_id)
{    
	$.ajax({ 
		url: "http://scnuzs.sinaapp.com/wxgetmusic.php?t=jsonp&song_id="+song_id+"&open_id="+open_id, 
		dataType: 'jsonp', 
		jsonp: 'callback', 
		timeout: 3000,
		success: function(json) { 
			if(json.error == 0)
			{
                //替换歌曲信息
				$("#songtitle").html(json.songtitle);
				$("#auther").html(json.auther);
				$("#songintro").html(json.songintro);
				$("#cover_pic").css({'background':'url('+json.cover+')'});
                
                //替换歌曲
				document.getElementById("song_player").src=json.url;
                //歌曲ID赋值
				next_id=json.next_id;
				prev_id=json.prev_id;
				current_id=json.current_id;
                //判断是否喜欢歌曲
                if(json.like_song>0)
                {
                	$("#heartbtn").addClass("heartselect");
                }
                else
                {
                	$("#heartbtn").removeClass("heartselect");
                }
			}
			else
			{
				alert(json.errmsg);
			}
		}
	});
	return true;
}
    
    
    //歌曲表态
function like(){
    
    if(open_id=="")
    {
    	alert("请先微信搜索“SCNUZS”关注四班助手的公众账号\n\n然后在对话框中输入“MBOX”后使用此功能！");
        return false;
    
    }
	$.ajax({ 
		url: " http://scnuzs.sinaapp.com/wxgetmusic.php?t=jsonp&do=like&song_id="+current_id+"&open_id="+open_id, 
		dataType: 'jsonp', 
		jsonp: 'callback', 
		timeout: 3000,
		success: function(json) { 
			if(json.error == 0)
			{
                //根据返回参数切换样式
                if(json.like_flag==1)
                {
                	$("#heartbtn").addClass("heartselect");
                }
                else
                {
                	$("#heartbtn").removeClass("heartselect");
                }
			}
			else
			{
				alert(json.errmsg);
			}
		}
	});
	return true;
}
    //上一首
function prev_song()
{
    //判断上一首歌曲ID是否为0，为0表示这是第一首了
	if(prev_id==0)
	{
		alert("亲，没有上一首歌曲了！");
		return false;
	}
    //播放
	get_song(prev_id,open_id);
}
    //下一首
function next_song()
{
    //判断下一首歌曲ID是否为0，为0表示已经到末尾，跳转到第一首
	if(next_id==0)
	{
		get_song(-1,open_id);
		return false;
	}
    //播放
	get_song(next_id,open_id);
}

    //获取歌曲列表,page:页码,like_flag:喜欢列表标识    
function get_list(page,like_flag)
    
{
    var list_type="list";
    
    if(like_flag==1)
    {
    	list_type="like_list";
    }
  
	$.ajax({ 
		url: " http://scnuzs.sinaapp.com/wxgetmusic.php?t=jsonp&do="+list_type+"&open_id="+open_id+"&page="+page,
		dataType: 'jsonp', 
		jsonp: 'callback', 
		timeout: 3000,
		success: function(json) { 
			if(json.error == 0)
			{
				var list_html="";
				var j=0;
				$.each(json.music_list,function(i,v){
							list_html+='<dl>';
							list_html+='<a href="javascript:void(0)" onclick="get_song_from_list('+v.mid+')">';
							list_html+='<dt><img src="'+v.cover+'" width=50></dt>';
							list_html+='<dd><h3>'+v.title+'</h3></dd>';
							list_html+='<dd>'+v.singer+'</dd>';
							list_html+='<dd><span>'+v.intro+'</span></dd>';
							list_html+='</a>';
							list_html+='</dl>';
				});
				$("#fmlistdiv").html(list_html);
				var page_html="";
				if(json.page!=1)
				{
					page_html+='<a href="javascript:void(0)" class="first_pg" onclick="get_all_list(1);">首页</a>';
					page_html+='<a href="javascript:void(0)" class="prev_pg" onclick="get_all_list('+json.music_prev+');">上一页</a>';
				}
				page_html+='<span class="num_pg">'+json.page+'/'+json.real_page+'</span>';
				if(json.page!=json.real_page)
				{
					page_html+='<a href="javascript:void(0)" class="next_pg" onclick="get_all_list('+json.music_next+');">下一页</a>';
					page_html+='<a href="javascript:void(0)" class="end_pg" onclick="get_all_list('+json.real_page+');">尾页</a>';
				}
				$("#s_page_div").html(page_html);
			}
            else
            {
            	$("#fmlistdiv").html("<p>"+json.errmsg+"</p>");
            }
		}
	});
	return true;

}
    //列表点击歌曲播放
function get_song_from_list(song_id)
{
	move('#fmlistbox').sub('left', dwidth).end();
   
	get_song(song_id,open_id);
}


</script>

</body>
</html>